<!DOCTYPE html>
<!-- saved from url=(0022)http://127.0.0.1:5000/ -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>爱租屋</title>
 <!-- Icon -->
    <link rel="icon" href="../static/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap core CSS -->
    <!-- <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrapValidator.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../static/css/clean-blog.css" rel="stylesheet">
    <!-- Beautiful css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <style>
        /*定位，数量*/
        #mainnav {
            background:#343a40;
        }

        #mainnav .navbar-brand {
            padding: 10px 20px;
            color: #ecf0f1;
        }

        #mainnav .navbar-brand:focus, #mainnav .navbar-brand:hover {
            color: #0085A1;
        }

        #mainnav .navbar-nav > li.nav-item > a {
            padding: 10px 20px;
            color: #ecf0f1;
        }

        #mainnav .navbar-nav > li.nav-item > a:focus, #mainnav .navbar-nav > li.nav-item > a:hover {
            color: #0085A1;
        }

        .area-info {
            margin-left: 5px;
            padding-left: 5px;
            font-size: 16px;
            padding-bottom: 10px;
            border-bottom: #ecf0f1 1px solid;
        }

        .info-line {
            margin: 10px 0 55px 0;
        }

        .course {
            margin-top: 10px;
            padding: 7px 5px 0 5px;
            background: #fff;
        }

        .course-info {
            height: 37px;
            font-weight: 500;
            color: #333;
            font-size: 16px;
        }

        .course-info1 {
            height: 20px;
            font-weight: 300;
            font-size: 12px;
        }

        .course-info span {
            line-height: 37px;
        }

        .price {
            color: #e74c3c;
            font-size: 14px;
        }

        .tj-header {
            margin: 30px 0 10px;
        }

        .describe {
            font-size: 15px;
            color: #bdc3c7;
        }

        /* login */
        .m-header {
            padding: 10px 16px 2px;
        }

        .login_form {
            margin-top: 150px;
            z-index：
            999;
        }

        .form-info {
            font-size: 18px;
            color: #2c3e50;
        }

        .link-pair-container {
            display: flex;           /* 启用 Flexbox */
            justify-content: space-between; /* 让里面的直接子元素（两个 a 标签）两端对齐 */
            align-items: center;
            flex-wrap: wrap;
            margin-top: 40px;
            /* 如果需要，可以设置容器的宽度，比如 width: 100%; */
            /* 如果需要垂直居中，可以加 align-items: center; */
            /* 如果父容器可能不足以容纳两个标签而不换行，可以考虑加 flex-wrap: wrap; */
        }
        .switch-info {
            margin-left: 0 !important; /* 确保移除 */
            margin-right: 0 !important; /* 确保移除 */
            font-size: 14px;
            color: #2c3e50;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 2px;
        }

        /* search */
        .my-nav-tab {
            border-bottom: none;
        }

        .chanle1, .chanle2 {
            background-color: #ced4da;
            font-size: 14px;
            line-height: 30px;
            color: #495057;
            padding: 0 10px;
            border-radius: 3px 3px 0 0;
            font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;
        }

        .chanle1 {
            margin-right: 1px;
        }

        .chanle2 {
            margin-left: 1px;
        }

        .chanle1.active, .chanle2.active {
            background-color: #5bc0de;
            color: #fff; 
            position: relative;
        }

        .my-btn {
            padding: 9px 20px !important;
            line-height: 18px;
            border-radius: 0 !important;
        }

        #txt {
            width: 658px !important;
            border-radius: 0 !important;
        }

        #txt:focus {
            box-shadow: none;
        }

        input::-webkit-input-placeholder {
            /* placeholder字体大小  */
            font-size: 14px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;

        }

        #my-form {
            z-index: 999;
            position: absolute;
        }

        .li_style {
            z-index: 999;
            color: #495057;
            font-size: 14px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", 微软雅黑, "Segoe UI", Tahoma, 宋体b8b体, SimSun, sans-serif;
            text-align: left;
            width: 658px;
            padding: 8px 14px;
        }

        .chart {
            height: 340px;
        }

        .chart-describion {
            font-size: 15px;
            color: #333;
            text-align: center

        }

        /* 下拉菜单容器 */
        .dropdown {
            position: relative;
            margin-left: 20px;
        }

        /* 下拉触发按钮 */
        .dropdown-toggle {
            display: flex;
            align-items: center;
            padding: 8px 20px;
            border-radius: 25px;
            transition: all 0.3s ease;
            background: #f8f9fa;
            color: #2c3e50;
            font-weight: 500;
            text-decoration: none !important;
        }

        /* 鼠标悬停效果 */
        .dropdown-toggle:hover {
            background: #3498db;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        /* 下拉菜单本体 */
        .dropdown-menu {
            min-width: 200px;
            border: none !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 10px 0;
            margin-top: 10px !important;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
            visibility: hidden;
        }

        /* 显示时的动画 */
        .show .dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        /* 菜单项样式 */
        .dropdown-item {
            padding: 12px 25px;
            font-size: 14px;
            color: #34495e;
            transition: all 0.2s ease;
            position: relative;
            display: flex;
            align-items: center;
        }

        /* 菜单项悬停效果 */
        .dropdown-item:hover {
            background: #f8f9fa;
            color: #3498db;
            padding-left: 30px;
        }

        /* 菜单项前的装饰线 */
        .dropdown-item:before {
            content: '';
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            height: 0;
            width: 3px;
            background: #3498db;
            transition: all 0.3s ease;
        }

        .dropdown-item:hover:before {
            height: 60%;
        }

        /* 分割线样式 */
        .dropdown-divider {
            margin: 8px 0;
            border-color: #ecf0f1;
        }

        /* 当前用户名显示 */
        .dropdown-toggle::after {
            content: "\f007"; /* Font Awesome 用户图标 */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-left: 8px;
            border: none !important;
            vertical-align: middle;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .dropdown-menu {
                position: fixed !important;
                left: 50% !important;
                transform: translateX(-50%) translateY(10px) !important;
                width: 80%;
            }
            
            .show .dropdown-menu {
                transform: translateX(-50%) translateY(0) !important;
            }
        }

        .code-control {
            display: block;
            width: 70%;
            height: calc(2.25rem + 6px);
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
    </style>

</head>

<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top is-fixed" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="http://127.0.0.1:5000/">爱租屋</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">

            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://127.0.0.1:5000/">首页</a>
                </li>


                    {% if request.cookies.get('is_logged_in') == 'true' %}
                    <li class="nav-item" id="user">
                    <!-- 登录状态显示用户菜单 -->
                        <a class="nav-link" href="#">{{ request.cookies.get('username') }}</a>
                    </li>
                    <li class="nav-item" id="user">
                        <a class="nav-link" href="/user/{{ request.cookies.get('username') }}">个人中心</a>
                    </li>
                    <li class="nav-item" id="user">
                        <a class="nav-link" href="/logout">注销</a>
                    </li>
                {% else %}
                    <li class="nav-item" id="user">
                        <!-- 未登录显示登录按钮 -->
                        <a class="nav-link" data-toggle="modal" data-target="#login" href="#">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<!-- Page Header -->
<header class="masthead" style="background-image: url(&#39;/static/img/home-bg.jpg&#39;)">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="site-heading">
                    <h1>爱租屋</h1>
                    <span class="subheading">推荐租房</span>

                    <!--智能搜索功能-->
                    <div>
                        <ul class="nav nav-tabs my-nav-tab" style="margin:15px 0 0 0">
                            <li class="chanle1 active"><span style="color: #0284c7;">地区搜索</span></li>
<!--                            <li class="chanle2"><span>户型搜索</span></li>-->
                        </ul>
                        <form class="form-inline" role="form" id="my-form" action="http://127.0.0.1:5000/query" method="post">
                            <div class="form-group">
                                <label class="sr-only" for="txt">名称</label>
                                <input type="text" class="form-control" id="txt" name="addr" placeholder="请输入区域、商圈或小区名开始找房">
                            </div>
                            <button type="submit" class="my-btn btn btn-info" id="btn">提交</button>
                            <ul id="list" class="list-group">

                            </ul>
                        </form>
                    </div>

                </div>
                <div>

                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <!--定位，数量-->
    <div class="row">
        <div class="col-lg-12">
            <div class="area-info">
                <span style="color:#2980b9">当前城市:</span>
                <span style="color:#e74c3c" >{{ city }}</span>
                &nbsp;
                <span style="color:#2980b9">房源总数:</span>
                <span style="color:#e74c3c">{{ count }}</span>
            </div>
        </div>
    </div>

    <!--当前城市-->
    <div class="row info-line">
        <!-- 模块1标题 -->
        <div class="col-lg-12 tj-header">
            <h3>为您为家</h3>
            <div class="describe">
                <span>为您精准定位，当前城市房源信息</span>
                <span class="float-right"><a href="http://127.0.0.1:5000/list/pattern/1" style="color: #3498db; padding-right: 5px">更多房源: {{ city }}</a></span>
            </div>
        </div>
        <!-- 模块1信息展示 -->
        {% for house in house_new_list %}
        <div class="col-lg-4">
            <div class="course">
                
                <!-- <div><a href="http://127.0.0.1:5000/house/{{ house.id }}"><img class="img-fluid img-box" src="{{ url_for('static', filename='img/house-gb.jpg') }}" alt=""></a></div> -->
                <div><a href="http://127.0.0.1:5000/house/{{ house.id }}"><img class="img-fluid img-box" src="{{ url_for('static', filename='img/house-gb'~((loop.index0 % 6) + 1)~'.jpg') }}" alt=""></a></div>
                <div class="course-info">
                    <span>{{ house.address }}</span>

                </div>
                <div class="course-info1">
                    <span>{{ house. rooms }} - {{ house.area }}</span>
                    <span class="price float-right">{{ house.price }}</span>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>
    <hr>

    <!--热点推荐-->
    <div class="row info-line">
        <!-- 模块2标题 -->
        <div class="col-lg-12 tj-header">
            <h3>为您推荐</h3>
            <div class="describe">
                <span>热点房源，我们为你精选</span>
                <span class="float-right"><a href="http://127.0.0.1:5000/list/hot_house/1" style="color: #3498db; padding-right: 5px">更多热点房源</a></span>
            </div>
        </div>
        <!-- 模块2内容 -->
         {% for house in house_new_list %}
        <div class="col-lg-3">
            <div class="course">
                <div><a href="http://127.0.0.1:5000/house/{{ house.id }}"><img class="img-fluid img-box" src="{{ url_for('static', filename='img/house-hot'~((loop.index0 % 6) + 1)~'.jpg') }}" alt=""></a></div>
                <div class="course-info">
                    <span>{{ house.address}}</span>
                </div>
                <div class="course-info1">
                    <span>{{ house.rooms }} - {{ house.area }}</span>
                    <span style="color: #3498db">&nbsp;&nbsp;<i class="fa fa-heart" aria-hidden="true">&nbsp;{{ house.price }}</i></span>
                    <span class="price float-right">￥1400</span>
                </div>
            </div>
        </div>
                {% endfor %}


    <!--注册登录-->
    <div class="row info-line">
        <div class="col-lg-8 col-md-10 mx-auto">
            <!-- 注册窗口 -->
            <div id="register" class="modal fade login_form" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>×</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">注册</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="registeform" action="http://127.0.0.1:5000/register" method="post">
                                <div class="form-group">
                                    <label for="" class="form-info">用户名</label>
                                    <input class="form-control" name="username" type="text" placeholder="6-15位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">密码</label>
                                    <input class="form-control" name="password" type="password" placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">再次输入密码</label>
                                    <input class="form-control" name="confirmPassword" type="password" placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">邮箱</label>
                                    <input class="form-control" name="email" type="email" placeholder="例如:123@123.com">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id="registe-btn" type="button">注册</button>
                                    <button class="btn btn-danger" data-dismiss="modal" type="button">取消</button>
                                </div>
                                <div class="link-pair-container">
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#login" class="switch-info">已有账号？点我登录</a>
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#email_login" class="switch-info">邮箱登陆</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 登录窗口 -->
            <div id="login" class="modal fade login_form">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>×</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">登录</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="loginform" action="http://127.0.0.1:5000/login" method="post">
                                <div class="form-group">
                                    <label for="" class="form-info">用户名</label>
                                    <input class="form-control" name="username" type="text" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">密码</label>
                                    <input class="form-control" name="password" type="password" placeholder="">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id="login-btn" type="button">登录</button>
                                    <button class="btn btn-danger" data-dismiss="modal" type="button">取消</button>
                                </div>
                                <div class="link-pair-container">
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#email_login" class="switch-info">邮箱登陆</a>
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#register" class="switch-info">还没有账号？点我注册</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="email_login" class="modal fade login_form">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>×</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">邮箱登陆</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="email_loginform" action="http://127.0.0.1:5000/email_login" method="post">
                                <div class="form-group">
                                    <label for="email" class="form-info">邮箱</label>
                                    <input class="form-control" name="email" type="email" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label for="code" class="form-info">验证码</label>
                                    <div style="display: flex;">
                                        <input class="code-control" name="code" type="text" placeholder="">
                                        <button class="btn btn-primary" id="get_code_btn" type="button">发送验证码</button>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id="email_login-btn" type="button">登录</button>
                                    <button class="btn btn-danger" data-dismiss="modal" type="button">取消</button>
                                </div>
                                <div class="link-pair-container">
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#login" class="switch-info">账号密码登录</a>
                                    <a href="http://127.0.0.1:5000/" data-toggle="modal" data-dismiss="modal" data-target="#register" class="switch-info">还没有账号？点我注册</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <hr>
</div>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">


                <!-- <p class="copyright text-muted">Copyright © 二手好房 2019</p> -->
            </div>
        </div>
    </div>
</footer>

    <!-- Bootstrap core JavaScript -->

    <script src="/static/vendor/jquery/jquery.min.js"></script>

    <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="/static/js/bootstrapValidator.min.js"></script>

    <script src="/static/js/login.js"></script>

    <!-- Custom scripts for this template -->

    <script src="/static/js/clean-blog.min.js"></script>

    <script type="text/javascript" src="/static/vendor/echarts-stat/ecStat.min.js"></script>

    <script src="/static/js/echarts.min.js"></script>
<script>

    // 由户型搜索切换至地区搜索或者重复点击地区搜索
// $(".chanle1").on('click', function () {
//     // 用于地区搜索重复点击的初始化
//     if ($('.chanle1').hasClass('active')) {
//         resetSearchType();
//     } else {
//         // 移除户型搜索的样式
//         $(".chanle2").removeClass('active');
//         // 重新设置选中字段和<input>标签的属性
//         $(".chanle1").addClass('active');
//         $("#txt").attr('name', 'addr');
//         $('#txt').attr('placeholder', '请输入区域、商圈或小区名开始找房');
//     }
//     // 清空建议列表
//     clearSuggestions();
// });

// 由地区搜索切换至户型搜索或者重复点击户型搜索
$(".chanle2").on('click', function () {
    // 用于户型搜索重复点击的初始化
    if ($('.chanle2').hasClass('active')) {
        resetSearchType();
    } else {
        // 移除地区搜索的样式
        $(".chanle1").removeClass('active');
        // 重新设置选中字段和<input>标签的属性
        $(".chanle2").addClass('active');
        $("#txt").attr('name', 'rooms');
        $('#txt').attr('placeholder', '请输入户型开始找房，例如:1室1厅');
    }
    // 清空建议列表
    clearSuggestions();
});

// 重置搜索类型
function resetSearchType() {
    $(".chanle1").removeClass('active');
    $(".chanle2").removeClass('active');
    $("#txt").attr('name', '');
    $('#txt').attr('placeholder', '');
    $("#txt").val('');
    clearSuggestions();
}

// 清空建议列表
function clearSuggestions() {
    $("#list").empty();
}

// 输入框的书写逻辑
var oTxt = document.getElementById('txt');  // 输入框
var oBtn = document.getElementById('btn');  // 提交按钮
var oList = document.getElementById('list');// 提示列表

// 设置锁，true表示锁住输入框，false表示解锁输入框
var cpLock = false;

// 中文搜索，监听compositionstart事件，如果触发该事件，就锁住输入框
$('#txt').on('compositionstart', function () {
    cpLock = true;
});

// 中文搜索，监听compositionend事件，如果触发该事件，就解锁输入框
$('#txt').on('compositionend', function () {
    cpLock = false;
    var keyWord = oTxt.value;
    searchByIndexOf(keyWord);
});

// 英文搜索，监听input事件，用于处理字母搜索
$('#txt').on('input', function () {
    if (!cpLock) {
        var keyWord = oTxt.value;
        searchByIndexOf(keyWord);
    }
});

// 点击提交按钮进行查询
oBtn.addEventListener('click', function () {
    var keyWord = oTxt.value;
    if (keyWord.trim() === '') return; // 防止空搜索
    searchByIndexOf(keyWord);
}, false);
//点击输入框时进行查询
oTxt.addEventListener('click', function(e) {
    var keyWord = oTxt.value;
    if (keyWord.trim() === '') return; // 防止空搜索
    searchByIndexOf(keyWord);
});
// 回车查询
oTxt.addEventListener('keydown', function (e) {
    if (e.keyCode == 13) {
        var keyWord = oTxt.value;
        if (keyWord.trim() === '') return; // 防止空搜索
        searchByIndexOf(keyWord);
    }
}, false);

// 点击页面其他地方关闭建议列表
$(document).on('click', function (e) {
    if (!$(e.target).closest('#txt, #list').length) {
        clearSuggestions();
    }
});

// 搜索关键字
function searchByIndexOf(keyWord) {
    // 空搜索不发送请求
    if (keyWord.trim() === '') {
        clearSuggestions();
        return;
    }

    $(".my-nav-tab li").each(function (index, element) {
        if ($(this).hasClass("active")) {
            var info = $(this).text();
            var data = {"kw": keyWord, "info": info};

            $.ajax({
                url: "/search/keyword/",
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (response) {
                    if (response['code'] == 0) {
                        // 搜索结果为空时清空建议列表
                        clearSuggestions();
                        // 可以选择保留或移除警告弹窗
                        // var warning_str = '未找到关于' + keyWord + '的房屋信息！';
                        // alert(warning_str);
                    } else if (response['code'] == 1) {
                        var list = response['info'];
                        console.log('search', list);

                        oList.innerHTML = '';
                        var item = null;

                        // 限制最多显示9条建议
                        var maxItems = Math.min(list.length, 9);

                        for (var i = 0; i < maxItems; i++) {
                            item = document.createElement('li');
                            item.setAttribute("class", "list-group-item li_style");
                            item.setAttribute("title", list[i]['t_name']);

                            var li_text = list[i]['t_name'] + '<span class="badge float-right">大约有' + list[i]['num'] + '套房</span>';
                            item.innerHTML = li_text;

                            oList.appendChild(item);
                        }

                        // 绑定建议项点击事件
                        bindSuggestionClickEvents();
                    }
                },
                error: function () {
                    clearSuggestions();
                    console.error("搜索请求失败");
                }
            });
        }
    });
}

// 绑定建议项点击事件
function bindSuggestionClickEvents() {
    $('.li_style').on('click', function () {
        // 移除其他建议项的选中状态
        $('.li_style').removeClass('active');
        $(this).addClass('active');

        var t_name = $(this).attr('title');
        $('#txt').val(t_name);
        clearSuggestions();
    });
}




</script>




</body></html>